import { useThemeStore } from '@renderer/stores'
import { useState } from 'react'

const Moon = () => {
  const [color, setColor] = useState<string>('#2D3548')
  const { isDark, setTheme } = useThemeStore()

  return (
    <>
      <svg
        className="cursor-pointer ml-1"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4357"
        width="26"
        height="26"
        onClick={() => setTheme(!isDark)}
        onMouseEnter={() => setColor('#3b82f6')}
        onMouseLeave={() => setColor('#2D3548')}
      >
        <path
          fill={color}
          d="M525.963636 93.090909c225.745455 6.981818 404.945455 193.163636 404.945455 418.909091 0 230.4-188.509091 418.909091-418.909091 418.909091-174.545455 0-323.490909-107.054545-386.327273-256H139.636364c230.4 0 418.909091-188.509091 418.909091-418.909091 0-58.181818-11.636364-111.709091-32.581819-162.909091m0-93.090909c-30.254545 0-58.181818 13.963636-76.8 39.563636-18.618182 25.6-20.945455 60.509091-9.309091 88.436364 16.290909 41.890909 25.6 83.781818 25.6 128 0 179.2-146.618182 325.818182-325.818181 325.818182h-11.636364-2.327273c-30.254545 0-58.181818 13.963636-76.8 39.563636-18.618182 25.6-20.945455 60.509091-9.309091 88.436364C121.018182 900.654545 304.872727 1024 512 1024c281.6 0 512-230.4 512-512C1024 235.054545 807.563636 9.309091 528.290909 0h-2.327273z"
          p-id="4358"
        />
      </svg>
    </>
  )
}

export default Moon
